<!-- 本页样式 -->
<style scoped>
.del-dialog-cnt {
	font-size: 16px;
	text-align: center;
}
.footer {
	text-align: center;
}
</style>
<!-- 页面布局-->
<template>
	<div>
		<div class="table">
			<!-- 标题导航栏 -->
			<!-- 主体区 -->
			<div class="container">
				<!-- 查询条件 -->
				<!-- 查询条件END -->
				<!-- 数据列表 -->
				<div class="grid-data-box">
					<el-table
						v-loading="loading"
						:data="tableData"
						height="300"
						border
						style="width: 100%"
						ref="multipleTable"
						@selection-change="handleSelectionChange"
						@sort-change="handleSortChange"
					>
						<!-- <el-table-column type="selection" width="45" :checked="1"></el-table-column> -->
						@change.native="getCurrentRow(scope.$index,scope.row)"
						<el-table-column label="选择" width="50" center>
							<template slot-scope="scope">
								<el-radio
									class="radio"
									v-model="radio"
									:label="scope.$index"
									@change.native="getCurrentRow(scope.$index,scope.row)"
								>&nbsp;</el-radio>
							</template>
						</el-table-column>
						<el-table-column prop="rolename" label="角色名称" width="150"></el-table-column>
						<!-- <el-table-column prop="code" label="检索代码" width="120"></el-table-column> -->
						<!-- <el-table-column prop="roletype" label="类型" width="120" :formatter="formatter" ></el-table-column> -->
						<el-table-column prop="roledesc" label="角色描述"></el-table-column>
					</el-table>
				</div>
				<!-- 数据列表END -->
				<!-- 翻页导航条 -->
				<div class="navigate-box">
					<div class="pagination">
						<el-pagination
							background
							@current-change="handleCurrentChange"
							:total="parampters.totalCount"
							@size-change="handleSizeChange"
							:current-page.sync="parampters.pageIndex"
							:page-sizes="[20, 50, 100, 200]"
							:page-size="parampters.pageRows"
							layout="total, sizes, prev, pager, next"
						></el-pagination>
					</div>
				</div>
				<!-- 翻页导航条END -->
			</div>
			<!-- 主体区END -->
		</div>
		<div class="footer">
			<el-button @click="handleCancel()">关 闭</el-button>
			<el-button type="primary" @click="handleOk()">确 定</el-button>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 筛选条件
			parampters: {
				//查询参数
				userid: "",
				rolename: "",
				code: "",
				loginsid: "", //登录会话SID
				pageRows: 20, //每页行数
				pageCount: 0, //总页数
				pageIndex: 0, //当前页
				totalCount: 0 //总记录数
			},
			// 加载用户数据加载框标识
			loading: false,
			// 查询出的表格数据
			tableData: [],
			// 表格多选数据数组
			multipleSelection: [],
			// 表格操作数据所在行的索引
			idx: -1,
			//confirm提示信息弹框
			confirmBox: null,
			//所选记录id
			selectedId: "",
			//事物类型
			actType: "list",
			radio: 0
		};
	},
	// 初始进入页面获取表格数据(因为是页面import引用的，所以需要用mounted函数)
	mounted() {
		this.handleInitLoad();
	},
	computed: {
		exapm: {
			cache: false,
			get: function() {
				return Date.now();
			}
		}
	},
	props: {
		sourceData: {
			required: true
		}
	},
	methods: {
		getCurrentRow(index, row) {
			this.radio = index;
		},
		/**
		 * @augments column
		 * @augments prop 排序字段
		 * @augments order  排序顺序 ascending 升序  descending 降序
		 * 排序点击方法
		 */
		handleSortChange(column, prop, order) {
			console.log(column, prop, order);
			if (order == "ascending") {
				// 升序
			} else if (order == "descending") {
				// 降序
			}
		},
		/**
		 * @augments  row 行所在的数据
		 * 表格数据列 内容字典转换
		 */
		formatter(row, column) {
			if (column.property == "roletype") {
				if (row.roletype == 1) {
					return "系统";
				} else {
					return "扩展";
				}
			}
			return "";
		},

		/**
		 * @augments val  多选数组
		 * 表格多选数据
		 */
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},

		/**
		 * @augments val 页码
		 * 切换页码操作
		 */
		handleCurrentChange(val) {
			this.parampters.pageIndex = val;
			// 重新获取当前页码的数据
			this.searchLoad();
		},

		/**
		 * @augments val 每页显示条数
		 * 每页显示条数修改
		 */
		handleSizeChange(val) {
			// 修改每页显示条数
			this.parampters.pageRows = val;
			// 重新获取数据
			this.searchLoad();
		},

		/**
		 * 组件初始化加载
		 */
		handleInitLoad() {
			this.searchLoad();
		},

		//勾选指定行
		toggleSelection(rows) {
			if (rows) {
				rows.forEach(row => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
		},
		/**
		 * 条件筛选查询,加载数据
		 */
		searchLoad() {
			this.parampters = this.$util.trimObjStr(this.parampters);
			this.parampters.loginsid = this.sourceData.loginInfo.sessionId;
			this.parampters.userid = this.sourceData.userid;
			this.loading = true;
			this.$axios
				.get(
					this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsuserrole/touserroles",
					{
						params: this.parampters
					}
				)
				.then(res => {
					if (res.data.result == "true") {
						let data = res.data; //
						this.parampters.pageIndex = parseInt(data.pageIndex);
						this.parampters.pageCount = parseInt(data.pageCount);
						this.parampters.totalCount = parseInt(data.totalCount);
						//
						if (this.sourceData.loginInfo.administrator) {
							this.tableData = data.resultData;
						} else {
							this.tableData = this.sourceData.loginInfo.roles;
						}
						//默认勾选
						var selers = [];
						for (var i = 0; i < data.resultData.length; i++) {
							if (data.resultData[i].chk == "1") {
								for (var j = 0; j < this.tableData.length; j++) {
									if (this.tableData[j].id == data.resultData[i].id) {
										//selers.push(this.tableData[j]);
										this.radio = j;
										break;
									}
								} 
							}
						}
						// setTimeout(() => {
						// 	this.toggleSelection(selers);
						// }, 20);
						// this.tableData.forEach((item, index) => {
						// 	if (item.chk == "1") {
						// 		this.radio = index;
						// 	}
						// });
						this.loading = false;
					} else {
						this.$error(
							"查询失败" +
								res.data.resultMessage +
								",错误代码:" +
								res.data.resultCode
						);
						this.loading = false;
					}
				})
				.catch(function(error) {
					//console.log(error);
				});
		},

		/**
		 *
		 */
		saveUserRoles() {
			var chkids = "",
				unchkids = [];
			this.tableData.forEach((item, index) => {
				if (this.radio == index) {
					chkids = item.id;
				} else {
					unchkids.push(item.id);
				}
			});
			unchkids = unchkids.join(",");
			console.log(unchkids, chkids);
			var datain = {
				loginsid: this.sourceData.loginInfo.sessionId,
				userid: this.sourceData.userid,
				roleids: chkids,
				unroleids: unchkids
			};
			//
			var url =
				this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsuserrole/saveuserroles";
			this.loading = true;
			this.$axios
				.post(url, datain)
				.then(res => {
					if (res.data.result == "true") {
						this.$message.success(res.data.resultMessage);
						this.loading = false;
						this.handleCancel();
					} else {
						this.$error(
							"保存失败" +
								res.data.resultMessage +
								",错误代码:" +
								res.data.resultCode
						);
						this.loading = false;
					}
				})
				.catch(function(error) {
					//console.log(error);
				});
		},

		/**
		 *
		 */
		handleCancel() {
			this.$emit("cancel", this.cancelData);
		},

		/**
		 *
		 */
		handleOk() {
			//console.log( this.multipleSelection) ;
			//this.okData = this.tableData;
			//this.$emit('ok',this.okData)
			this.saveUserRoles();
		}
	}
};
</script>
